<template>
<view class="notice-content">
			<view class="notice-icons">
				<image src="/static/images/notice-icons.png" mode="aspectFill"></image>
				
			</view>
			<view class="notice-title">
				<swiper class="notice-swiper" :autoplay="true" :interval="3000" :vertical="true" :duration="1000">
					<template v-for="item in noticeData" :key="item">
					<swiper-item class="notice-swiper-item">
						<view class="swiper-item">
							{{item.title}}
						</view>
					</swiper-item>
					
					</template>
					
				</swiper>
			</view>
			<view class="notice-arrow">
				<uni-icons type="right" size="20" color="#ead5ff"></uni-icons>
			</view>
			
		</view>

</template>

<script setup>
	const {noticeData}=defineProps(['noticeData'])
</script>

<style lang="scss" scoped>
	
	.notice-content{
		width: 100%;
		height: 40rpx;
		margin-top: 20rpx;
		display: flex;
		text-align: left;
		justify-content: space-between;
		align-items: center;
			.notice-icons{
				flex-shrink: 0;
				width: 88rpx;
				height: 40rpx;
	
				image{
					width: 88rpx;
					height: 40rpx;
					
				}
			}
			.notice-title{
				width:100%;
					flex: 1;
					
					padding: 20rpx;
					font-size: 16px;
					color: #2f2f2f;
					
					
					
			}
		.notice-swiper{
			width:100%;
			height: 40rpx;
			.notice-swiper-item{
				height: 100%;
				line-height: 40rpx;
				text-decoration:underline;
				@include text-ellipsis(1);
			}
		}
		.notice-arrow{
			flex-shrink: 0;
			
		}
	}
</style>